{extend name="public/common"}

{block name="style"}
<title>资源中心</title>
<link rel="stylesheet" href="/home/css/resource/upload.css?v={$Think.config.version}">
{/block}

{block name="body"}
<div id="app" v-cloak>
    <div class="header">
        <div :class="active == 1?'active':''" @click="chooseType(1)">新建上传</div>
        <div :class="active == 2?'active':''" @click="chooseType(2)">已经上传</div>
    </div>
    <div class="body">
        <div class="page upload-page" v-show="active == 1">
            <div class="title box">
                <p>标题：</p>
                <div class="input-box box">
                    <input type="text" v-model="title" placeholder="请输入标题" oninput="if(value.length>50)value=value.slice(0,50);"/>
                    <span>{{title.length}}/50字</span>
                </div>
            </div>
            <div class="file-folder box">
                <p>发布位置：</p>
                <div class="select-box">{{folder}}</div>
            </div>
            <div class="upload-image box">
                <p>上传图片<span>（一张，限定5M）：</span></p>
                <div class="picture">
                    <div class="img-box">
                        <div class="img" v-for="(imgUrl,index) of img">
                            <img @click="delImg(index)" class="close" src="/home/images/common/close.png"/>
                            <img :src="imgUrl" @click="loadImg(imgUrl,img)"/>
                        </div>
                        <div class="img add" @click="imgUpload" v-if="img.length < 1">
                            <img src="/home/images/common/add.png"/>
                        </div>
                    </div>
                    <form ref="myform">
                        <input type="file" accept="image/jpg, image/png, image/gif, image/jpeg" @change="handleFileChange"
                               ref="upimg" style="display: none;">
                    </form>
                </div>
            </div>
            <div class="foot">
                <p>注：手机只支持图片上传哦～</p>
                <p>Word等上传请登录电脑端后台进行操作</p>
                <div @click="send">确认上传</div>
            </div>
        </div>
        <div class="page uploaded" v-show="active == 2">
            <ul>
                <li v-for="item in list" @click="getFile(item.path)">
                    <div class="file">
                        <div class="img-box">
                            <img src="/home/images/documents/doc.png" v-if="item.file_type=='doc'"/>
                            <img src="/home/images/documents/pdf.png" v-else-if="item.file_type=='pdf'"/>
                            <img src="/home/images/documents/ppt.png" v-else-if="item.file_type=='ppt'"/>
                            <img src="/home/images/documents/xls.png" v-else-if="item.file_type=='xlsx'"/>
                            <img src="/home/images/documents/zip.png" v-else-if="item.file_type=='zip'"/>
                            <img src="/home/images/documents/pic.png" v-else-if="item.file_type=='jpg' || item.file_type=='png' || item.file_type=='jpeg' || item.file_type=='gif'"/>
                            <img src="/home/images/documents/video.png" v-else-if="item.file_type=='mp4' || item.file_type=='avi'"/>
                        </div>
                        <div class="content">
                            <div class="title">
                                <span class="name">{{item.name}}</span>
                                <span class="uploader">{{item.username}}</span>

                            </div>
                            <div class="information">
                                <span class="time">{{item.create_time | timeToString('ymdhi')}}</span>
                                <span class="size">{{item.file_size}}</span>
                                <a :href="item.path">下载</a>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script>
    console.log({$user})
    console.log({$list})
    var vw = new Vue({
        el: "#app",
        data: {
            active: 1,
            title: '',
            folder: '',
            img: [],
            image: 0,
            user: {$user},
            list: {$list}
        },
        created() {
            this.folder = window.sessionStorage.getItem('folder');
        },
        methods: {
            chooseType(type){
                this.active = type;
            },
            toggleType(){
                var _this = this;
                _this.fileFolder.popupVisible = !_this.fileFolder.popupVisible;
            },
            typeConfirm(){
                var _this = this;
                if(_this.fileFolder.nowType != _this.fileFolder.onChangeType){
                    _this.fileFolder.nowType = _this.fileFolder.onChangeType;
                }
                _this.fileFolder.popupVisible = !_this.fileFolder.popupVisible;
            },
            selectType(p,v){
                var _this = this;
                if(v[0]){
                    _this.fileFolder.onChangeType = v[0];
                }
            },
            pushHistory() {
                window.addEventListener("popstate", function (e) {
                    self.location.reload();
                }, false);
                var state = {
                    title: "",
                    url: "#"
                };
                window.history.replaceState(state, "", "#");
            },
            delImg(e) {
                this.img.splice(e, 1);
                this.images.splice(e, 1);
                this.$refs.myform.reset(); //表单重置，解决input onchange选重问题
            },
            imgUpload() {
                var upImg = this.$refs.upimg;
                upImg.click();
            },
            handleFileChange(e) {
                var _this = this;
                var upImg = _this.$refs.upimg;
                var img = upImg.files[0];
                if (img) {
                    var newSize = (img.size / 1024).toFixed(2);
                    if (newSize <= 102400) {
                        _this.$indicator.open({
                            text: '图片上传中',
                            spinnerType: 'triple-bounce'
                        });
                        var formData = new FormData();
                        formData.append('picture', img);
                        _this.$http.post("{:Url('File/upload')}", formData).then(function (res) {
                            var data = JSON.parse(res.data);
                            console.log(data)
                            if (data.code == 1) {
                                // 在获取到文件对象进行预览
                                _this.$indicator.close();
                                _this.img.push(data.data.path); //上传后图片路径
                                _this.image = data.data.id;
                            } else {
                                _this.$indicator.close();
                                _this.$toast({
                                    message: "上传失败，请重新上传！",
                                    duration: 1500
                                });
                            }
                        }, function (res) {
                            _this.$indicator.close();
                            _this.$toast({
                                message: "上传失败，请重新上传！",
                                duration: 1500
                            });
                        });
                    } else {
                        _this.$toast("单张上传图片大小不能超过100M,请重新上传！");
                    }
                }
            },
            //            微信jssdk - 图片预览
            loadImg(src, imglist) {
                var urls = [];
                var current = window.location.protocol + '//' + window.location.host + src;
                for (var i in imglist) {
                    urls[i] = window.location.protocol + '//' + window.location.host + imglist[i];
                }
                wx.previewImage({
                    current: current,
                    urls: urls
                });
            },
            send() {
                var _this = this;
                if(!_this.title || _this.image == 0) {
                    _this.$toast({
                        message: "请输入文件标题并且选择相应图片",
                        duration: 1500
                    });
                    return false;
                }
                _this.$indicator.open({
                    text: '正在上传中',
                    spinnerType: 'triple-bounce'
                });
                _this.$http.post("{:Url('Resource/fileupload')}", {
                    'folder_id': window.sessionStorage.getItem('folderId'),
                    'name': _this.title,
                    'file_id': _this.image
                }, {emulateJSON: true}).then(function (res) {
                    console.log(res.data)
                    var data = res.data;
                    if (data.code == 1) {
                        _this.$indicator.close();
                        _this.$toast({
                            message: "上传成功，返回中",
                            iconClass: 'icon',
                            duration: 1500
                        });
                        setTimeout(function () {
                            window.history.back();
                        },1000);
                    } else {
                        _this.$indicator.close();
                        _this.$toast({
                            message: "上传失败，请重试！",
                            duration: 1500
                        });
                    }
                }, function (res) {
                    _this.$indicator.close();
                    _this.$toast({
                        message: "发布失败，请重试！",
                        duration: 1500
                    });
                });

            },
            getFile(path) {
                window.location.href = 'http://ow365.cn/?i=19298&ssl=1&furl=https://' + window.location.host + path;
            }
        }
    })
</script>
{/block}
